#navigation {
    display: flex;
    padding: 25px 10px;

    a {
        color: #666;
        transition: all .4s;
    }

    i {
        font-size: 12px;
        margin-left: 5px;
        margin-right: 5px;
        line-height: 22px;
    }
}
#category{
    
    .category_list {
        margin-top: 20px;
        background-color: #fff;
    
        h3 {
            font-size: 28px;
            color: #666;
            font-weight: 400;
            text-align: center;
            line-height: 100px;
        }
    
        ul {
            display: flex;
            padding: 0 32px;
            flex-wrap: wrap;
            min-height: 160px;
    
            li {
                width: 168px;
                height: 160px;
    
                a {
                    text-align: center;
                    display: block;
                    font-size: 16px;
    
                    img {
                        width: 100px;
                        height: 100px;
                        vertical-align: middle;
                    }
    
                    p {
                        line-height: 40px;
                    }
                }
            }
        }
    }
    
    .category_goods {
        background-color: #fff;
        margin-top: 20px;
        position: relative;
    
        .head {
            h3 {
                font-size: 28px;
                color: #666;
                font-weight: 400;
                text-align: center;
                line-height: 100px;
            }
    
            p {
                text-align: center;
                color: #999;
                font-size: 20px;
                position: relative;
                top: -20px;
            }
    
            span {
                position: absolute;
                top: 20px;
                right: 20px;
                font-size: 16px;
                vertical-align: middle;
                margin-right: 4px;
                color: #999;
            }
        }
    }
    
    .content {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0 65px 30px;
        // .hover{
        //     transform: translate3d(0,-3px,0);
        // box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        // }
    
        li {
            width: 220px;
            padding: 20px 30px;
            text-align: center;
            transition: all .5s;
    
            &:hover {
                transform: translate3d(0, -3px, 0);
                // box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
            }
    
            img {
                width: 160px;
                height: 160px;
                vertical-align: middle;
            }
    
            p {
                padding-top: 10px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
    
                &:nth-of-type(1) {
                    font-size: 16px;
                }
    
                &:nth-of-type(2) {
                    color: #999;
                    height: 29px;
                }
    
                &:nth-of-type(3) {
                    color: #cf4444;
                    font-size: 20px;
                }
            }
        }
    }
}